import UtilsDom, { createCustomElement } from "../../_dom/index";
import { getType, hasKey } from "../../_utils/index";
// 初始化播放器模块
export function initPlayer(Ctx) {
  try {
    const opts = Ctx.$options; // 数据劫持用户传入的 data
    // 创建自定义元素 video-player
    const videoPlayer = createCustomElement("video-player", {
      style: `video {width: 100%;height: 100%;}`,
      template: `<video id="video"></video>`,
      slot: [
        {
          name: "control",
          template: `<slot name="control"><div>123</div></slot>`,
        },
        {
          name: "loading",
          template: `<slot name="loading"></slot>`,
        },
        {
          name: "error",
          template: `<slot name="error"></slot>`,
        }
      ]
    })
    const video = videoPlayer.shadowRoot.querySelector("#video");


    // 向上下文el元素中添加videoPlayer
    Ctx.$el.appendChild(videoPlayer);
    // 初始化自定义父级标签的宽高为自适应
    (function initParentSize() {
      const parent = videoPlayer;
      const parentStyle = new UtilsDom(parent).attr.get('style') || '';
      const styleObj = {
        width: 'max-content',
        height: 'max-content',
        display: 'block',
        position: 'relative'
      };
      const styleStr = Object.keys(styleObj).reduce((styleStr, key) => {
        const value = styleObj[key];
        if (value) {
          styleStr += `${key}: ${value};`;
        }
        return styleStr;
      }, parentStyle);
      new UtilsDom(parent).attr.set('style', styleStr);
    })(Ctx, videoPlayer);


    // 如果传入了src属性，则设置video的src属性
    initSrcProp(Ctx, video);
    // 如果传入了宽高属性，则设置video的宽高
    initSizeProp(Ctx, video);
    // 设置视频的适配模式
    initObjectFit(Ctx, video);
    // 是否自动计算视频的宽高
    initAutoSize(Ctx, video);

    //  触发用户传入的mounted钩子函数,并将上下文传入
    opts.ready && opts.ready.call(Ctx, Ctx);

    // 保存video元素
    Ctx.$video = video;
    Ctx.$videoPlayer = videoPlayer;

  } catch (error) {
    console.log(error);
  }



}

function initSrcProp(Ctx, video) {
  const opts = Ctx.$options;
  if (opts.src) {
    video.src = opts.src;
  }
}

function initSizeProp(Ctx, video) {
  const opts = Ctx.$options;
  // 判断是否传入了宽高属性

  if (hasKey(opts, 'width') || hasKey(opts, 'height')) {
    // 如果传入了宽高属性，则设置video的宽高
    setVideoSize(video, opts);
  }

  // function setVideoSize(video, opts) {
  //   new UtilsDom(video).attr.set('width', opts.width + 'px')
  //   new UtilsDom(video).attr.set('height', opts.height + 'px')
  // }

  // 设置 style 属性
  function setVideoSize(video, opts) {
    const style = new UtilsDom(video).attr.get('style') || '';
    const width = hasKey(opts, 'width') ? opts.width + 'px' : '';
    const height = hasKey(opts, 'height') ? opts.height + 'px' : '';
    const styleObj = {
      width,
      height
    };
    const styleStr = Object.keys(styleObj).reduce((styleStr, key) => {
      const value = styleObj[key];
      if (value) {
        styleStr += `${key}: ${value};`;
      }
      return styleStr;
    }, style);
    new UtilsDom(video).attr.set('style', styleStr);

  }

}

function initObjectFit(Ctx, video) {
  // 设置视频的适配模式 style="object-fit: ctx.objectFit;"
  const opts = Ctx.$options;
  const objectFit = opts.videoFit;
  if (!objectFit) {
    new UtilsDom(video).style.pushStyle({
      'object-fit': 'fill'
    });
    return
  }
  if (objectFit) {
    new UtilsDom(video).style.pushStyle({
      'object-fit': objectFit
    });
  }



}

function initAutoSize(Ctx, video) {
  const opts = Ctx.$options;
  const autoSize = opts.autoSize;
  if (autoSize) {
    // 如果传入了autoSize属性，则监听video的onloadedmetadata事件，获取视频的宽高
    video.addEventListener('loadedmetadata', function () {
      const width = this.videoWidth;
      const height = this.videoHeight;
      // 设置video的宽高
      setVideoSize(video, {
        width,
        height
      });
    });
  }

  function setVideoSize(video, opts) {
    const style = new UtilsDom(video).attr.get('style') || '';
    const width = hasKey(opts, 'width') ? opts.width + 'px' : '';
    const height = hasKey(opts, 'height') ? opts.height + 'px' : '';
    const styleObj = {
      width,
      height
    };
    const styleStr = Object.keys(styleObj).reduce((styleStr, key) => {
      const value = styleObj[key];
      if (value) {
        styleStr += `${key}: ${value};`;
      }
      return styleStr;
    }, style);
    new UtilsDom(video).attr.set('style', styleStr);

  }

}

